<!---->
<template>
    <div class="page_login">
        <div class="logo">
            <img src="../../../static/images/login.png" alt=""/>
        </div>
        <div class="login-item">
            <x-input title="账号" placeholder="请输入账号" v-model="formItem.value" :max="13"></x-input>
        </div>
        <div class="login-item">
            <x-input title="密码" type="password" placeholder="请输入密码" v-model="formItem.password" :max="13"></x-input>
        </div>
        <div class="login-item">
            <div class="weui-cell" style="border-bottom: 1px solid #f4f4f4;">
                <div class="weui-cell__hd">
                    <label class="weui-label">图形验证码</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input" v-model="formItem.picvericode" type="text" name="yzm" placeholder="请输入验证码"
                           weui-required>
                </div>
                <div class="weui-cell__ft" @click="getPic()" style="display: inline-block !important;">
                    <a>
                        <img :src="'data:image/jpeg;base64,' +  VerificationCode" width="70px" height="25px">
                    </a>
                </div>
            </div>
        </div>
        <div class="btn-next-block" @click="loginIn()">
            <button class="btn-next weui-btn btn-check">登录</button>
        </div>
    </div>
</template>

<script>
    import {XInput} from 'vux'
    import login from '../../services/login'
    import CryptoJS from 'crypto-js'

    export default {
        name: "login",
        components: {
            XInput,
        },
        data() {
            return {
                formItem: {
                    // value: this.$tools.getMessage('username'),''
                    value: '',
                    // password: this.$tools.getMessage('password'),
                    // password: this.$tools.getMessage('password'),
                    picvericode: '',
                },
                VerificationCode: '',
            }
        },

        created() {
            this.getPic()
        },
        watch: {},
        methods: {
            //获取验证码
            getPic() {
                // 获取图片验证码
                let _param = this.$tools.invokeUAF('user/getpicvericode', {
                    'imagewidth': 100,
                    'imageheight': 25,
                    'codelength': 4
                })
                login.getpicvericode(_param).then(res => {
                    let data = res.data.data;
                    this.VerificationCode = data.image;
                    this.$tools.setMessage('pictoken', data.token)
                })
            },

            // 登录
            loginIn() {
                if (this.formItem.value.length > 12) {
                    this.$vux.toast.text('账号长度不能超过13')
                    return false;
                }

                if (!this.formItem.value) {
                    this.$vux.toast.text('请输入账号')
                    return false;
                }
                if (!this.formItem.password) {
                    this.$vux.toast.text('请输入密码')
                    return false;
                }

                let params = {
                    "username": this.formItem.value,
                    "password": this.$tools.saltpwd(this.formItem.password),
                    "picvericode": this.formItem.picvericode,
                    "pictoken": this.$tools.getMessage('pictoken'),
                    "imei": '',
                }

                let _param = this.$tools.invokeUAF('user/login', params);
                login.login(_param).then(res => {
                    if (res.data.code === '0') {
                        let data = res.data.data;
                        this.$tools.setMessage('rt', data.rt)
                        this.$tools.setMessage('uat', data.uat)
                        this.$tools.setMessage('username', this.formItem.value)
                        this.$tools.setMessage('password', this.formItem.password)
                        this.$tools.goPage('home')
                    } else {
                        this.getPic();
                    }
                })
            },

        },
    };
</script>

<style lang="less" rel="stylesheet/less" type="text/css">
    .page_login {
        height: 100vh;
        background-color: #fff;
    .logo {
        text-align: center;
        margin-top: 2.6rem;
        margin-bottom: 0.6rem;
    }
    .login-item {
        border-bottom: 1px solid #f4f4f4;
        margin: 0 .6rem;
    }
    .weui-cell {
        font-size: 17px !important;
    }
    .weui-input {
        border: none;
    }
    .weui-cell__hd {
        background: transparent !important;
        padding-right: 0.35em !important;
    }
    .weui-label {
        width: 110px !important;
    }

    }
</style>
